import { Button, Dropdown, Input, Switch, Table, type MenuProps } from "antd";
import PlusIcon from "@/assets/icons/plus.svg?jsx";
import PlayIcon from "@/assets/icons/play.svg?jsx";
import EditIcon from "@/assets/icons/edit.svg?jsx";
import DeleteIcon from "@/assets/icons/delete.svg?jsx";
import DownloadIcon from "@/assets/icons/download.svg?jsx";
import ToolsIcon from "@/assets/icons/tools.svg?jsx";
import { Link } from "react-router";
import AddDatasetModal from "./AddDatasetModal";
import { useMemo, useState } from "react";
import ChunkModal from "./ChunkModal";

export default function Dataset() {
  const [addDatasetModal, setAddDatasetModal] = useState({
    visible: false,
    type: "file" as "file" | "url",
  });

  const menu = useMemo<MenuProps["items"]>(() => {
    return [
      {
        label: "从文件上传",
        key: 1,
        onClick: function () {
          setAddDatasetModal({ visible: true, type: "file" });
        },
      },
      {
        label: "从url",
        key: 2,
        onClick: function () {
          setAddDatasetModal({ visible: true, type: "url" });
        },
      },
    ];
  }, []);

  const data = [{ id: 1, name: "aaa" }];
  return (
    <>
      <div className="mt-4">
        <div className="flex justify-end gap-x-4 py-2">
          <Input.Search className="w-80" />
          <Dropdown menu={{ items: menu }} trigger={["click"]}>
            <Button type="primary">
              <PlusIcon />
              <span>新增数据集</span>
            </Button>
          </Dropdown>
        </div>
        <Table dataSource={data} rowKey={(row) => row.id}>
          <Table.Column
            title="名称"
            render={(row) => <Link to={`./${row.id}`}>{row.name}</Link>}
          />
          <Table.Column title="分块数" />
          <Table.Column title="日期" />
          <Table.Column title="启用" render={(row) => <Switch />} />
          <Table.Column title="状态" />
          <Table.Column width={200} render={(row) => <ActionButtons />} />
        </Table>
      </div>
      <AddDatasetModal
        visible={addDatasetModal.visible}
        onVisibleChange={(visible) =>
          setAddDatasetModal((p) => ({ ...p, visible }))
        }
        type={addDatasetModal.type}
      />
      <ChunkModal visible={false} onVisibleChange={() => {}} />
    </>
  );
}

function ActionButtons() {
  return (
    <>
      <Button size="small" type="text">
        <PlayIcon />
      </Button>
      <Button size="small" type="text">
        <EditIcon />
      </Button>
      <Button size="small" type="text">
        <DeleteIcon />
      </Button>
      <Button size="small" type="text">
        <DownloadIcon />
      </Button>
      <Button size="small" type="text">
        <ToolsIcon />
      </Button>
    </>
  );
}
